<template>
  <div class="category__select">
    <tree-select v-model="selectCategory" @tree-select-change="$emit('tree-select-change')" :children="children" :options="list" :props="defaultProps" placeholder="请选择分类"/>
  </div>
</template>
<script>
import TreeSelect from "../TreeSelect";
export default {
  components: {
    TreeSelect
	},
	props: {
		value: [Number, String],
    data: {
      type: Array,
      required: true
    },
    keys: {
      type: String,
      required: true
    },
    children: {
      default: false
    },
    api: {
      type: String,
      default: "category/fetchGetMenuByKey"
    },
    defaultProps: Object
	},
  created() {
    this.getList();
  },
  computed: {
    selectCategory: {
			get() {
				return this.value
			},
			set(selectCategory) {
				this.$emit('input', selectCategory)
			}
    },
    list: {
      get() {
        return this.data
      },
      set(list) {
        this.$emit('update:data', list)
      }
    }
  },
  methods: {
    getList() {
      this.$store.dispatch(this.api, this.keys).then(res => {
        if (res && res.status) this.list = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.category__select {
  width: 200px;
}
</style>